<template>
	<view class="animated fadeIn faster position-relative bg-fff" style="height: 100vh;">
		<view class="pt-3 pb-1 bg-fff mb-2">
			<view class="p-item">
				<view class="d-flex d-flex-middle">
					<view class="font26 text-right" style="width: 150rpx;">
						<text class="color666">UID：</text>
					</view>
					<view>{{id}}</view>
				</view>
			</view>
			<view class="p-item">
				<view class="d-flex d-flex-middle d-flex-between">
					<view class="font26 text-right" style="width: 150rpx;">
						<text class="color666">昵称：</text>
					</view>
					<input class="d-flex-item py-1-5 px-1" maxlength="10" v-model="formData.name" placeholder="请输入昵称"
						placeholder-class="colorhold font26" />
				</view>
			</view>
			<view class="p-item">
				<view class="d-flex d-flex-middle">
					<view class="font26 text-right" style="width: 150rpx;">
						<text class="color666">注册时间：</text>
					</view>
					<view>{{created_at}}</view>
				</view>
			</view>
			<view class="p-item">
				<view class="d-flex d-flex-middle d-flex-between">
					<view class="font26 text-right" style="width: 150rpx;">
						<text class="color666">性别：</text>
					</view>
					<view class="d-flex-item d-flex">
						<view class="gender-btn mr-3" :class="{ 'gender-btn-active': formData.gender === 1 }" @click="formData.gender = 1">男</view>
						<view class="gender-btn" :class="{ 'gender-btn-active': formData.gender === 2 }" @click="formData.gender = 2">女</view>
					</view>
				</view>
			</view>
			<view class="p-item">
				<view class="d-flex d-flex-between">
					<view class="pt-2 font26 text-right" style="width: 150rpx;">
						<text>头像：</text>
					</view>
					<view class="d-flex-item pl-1">
						<view class="position-relative rounded" style="height: 180rpx;width: 180rpx;" @click="uploadImg">
							<view class="position-absolute top-0 left-0 z-index-100 rounded d-flex d-flex-middle d-flex-center" style="width: 180rpx;height: 180rpx;background-color: rgba(0,0,0,.5);">
								<text class="iconfont icon-xiangji colorfff" style="font-size: 56rpx;"></text>
							</view>
							<image :src="formData.avatar" class="rounded" style="width: 180rpx;height: 180rpx;"></image>
						</view>
						<!-- <uni-file-picker limit="1" :del-icon="false" v-model="imgList" :imageStyles="imageStyles" :auto-upload="false" @select="handleSelect" :source-type="['album', 'camera']"></uni-file-picker> -->
					</view>
				</view>
			</view>
		</view>
		<view class="position-fixed fab-bottom left-0 right-0 z-index-100">
			<view class="d-flex d-flex-between p-3">
				<view class="publish-sure-bg d-flex d-flex-item d-flex-middle d-flex-center rounded40 colorfff"
					@click="addInfo">提交资料</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { userApi } from '@/http/userApi.js';
	import { fileApi } from '@/http/fileApi.js';
	import store from '@/store/index.js';
	import { USER_TOKEN } from '@/constants/local-storage-key-const';
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				imgList: [],
				imageStyles: {
					width: 100,
					height: 100,
					border: {
						radius: '50%',borderWith:0
					}
				},
				formData: {
					avatar: '',
					name: '',
          gender: 1
				}
			}
		},
		onLoad() {
			let that = this
			if (this.openid == null || this.openid == '') {
				uni.login({
					success: res => {
						that.sendCode(res.code)
					},
					fail: res => {
						console.log(res)
					}
				});
			}
		},
		onReady() {
			this.formData.avatar = this.avatar
			this.imgList = [{
				"name": "111.jpg",
				"extname": "jpg",
				"url": this.formData.avatar
			}]
			this.formData.name = this.name
			console.log(this.imgList)
		},
		onUnload(options) {
			// 返回上一页
			let page = getCurrentPages();
			let prevpage = page[page.length - 2]; //上一个页面对象
			 let token = uni.getStorageSync(USER_TOKEN);
			if (prevpage.route == "pages/login/login" && token) {
				uni.switchTab({ url: '/pages/mine/mine' })
			}
		},
		computed: {
			...mapState({
				id: state => state.id,
				openid: state => state.openid,
				wx: state => state.wx,
				real_name: state => state.real_name,
				avatar: state => state.avatar,
				phone: state => state.phone,
				name: state => state.nickName,
        gender: state => state.gender,
		created_at:state=>state.created_at
			})
		},
		methods: {
			uploadImg(){
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera','album'],
					success: (res) => {
						this.uploadFile(res.tempFilePaths[0]);
					}
				});
			},
			handleSelect(e){
				const fileList = e.tempFiles;
				if (fileList.length > 0) {
					const filePath = fileList[0].path;
					this.uploadFile(filePath);
				}
			},
			uploadFile(filePath) {
				 let that = this
				 uni.showLoading({
				 	title:'上传中...'
				 })
				 fileApi.upload(filePath,{'user_id':that.id}).then((res)=>{
					 uni.hideLoading()
					 if(res && res.data){
						 // that.imgList.push({'url':res.data,'name':''})
						 that.formData.avatar = res.data
					 }
				 }).catch(()=>{
					 uni.hideLoading()
				 })
			},
			async sendCode(cd) {
				const userData = await userApi.addUserInfo({
					'code': cd,
				})
				store.commit('setUserInfo', userData)
			},
			async addInfo() {
				let that = this
				if (!that.formData.name) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					})
					return
				}
        if (that.formData.gender !== 1 && that.formData.gender !== 2) {
          uni.showToast({
            title: '请选择性别',
            icon: 'none'
          })
          return
        }
				if (that.imgList.length == '') {
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					})
					return
				}
				that.formData.user_id = that.id
				try {
					uni.showLoading({
						title: '提交中...'
					})
					let userData = await userApi.addUserInfo(that.formData)
					store.commit('setUserInfo', userData)
					uni.showToast({
						title: '提交成功！',
						duration: 1500,
						complete() {
							setTimeout(() => {
								uni.navigateBack({
									delta: 2
								})
							}, 1500)
						}
					})
				} catch (e) {
					console.log('e', e)
					uni.hideLoading()
				}
			},
		}
	}
</script>

<style scoped>
	.py-1-5 {
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		line-height: 38rpx;
	}

	.p-item {
		border-bottom: solid 1px #eee;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
	}

	.p-item-nobtm {
		border-bottom-width: 0;
	}

	.camera-bg {
		background-color: #f6f7fb;
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
	}

	.publish-sure-bg {
		background-color: #598dfc;
		height: 80rpx;
	}

	.bg-page {
		background: #f7f6fb;
	}

	.fab-bottom {
		bottom: calc(var(--window-bottom));
	}

	.publish-save-bg {
		background-color: #38aa84;
		height: 80rpx;
	}

  .gender-btn {
    padding: 10rpx 30rpx;
    border-radius: 30rpx;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    transition: all 0.3s;
  }

  .gender-btn-active {
    background-color: #598dfc;
    color: #fff;
    border-color: #598dfc;
  }
</style>